<template>
	<menuheader ref='menuheader' icon='back' iconsize='18'>{{strdate}}用餐人员</menuheader>
	<view class='person-box'>
		<uni-section title="用餐人员" type="line">
			<view class='person-list'>
				<block v-for="(person, personIndex) in personList" :key="personIndex">
					<uni-card title="基础卡片" :isFull="true" sub-title="副标题" extra="额外信息" :thumbnail="person.head" class='person-item' v-if='person.useflag==1'>
						<template v-slot:title>
							<uni-list>
								<uni-list-item :show-switch="true" :title="person.name" :switchChecked="person.useflag==1"/>
							</uni-list>
						</template>
						<view class='person-detail'>
							<text class='person-remark'>年龄:{{person.age}} BMI:{{person.bmi}}</text>
							<progress v-if='person.bmi<person.bmimin' class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.coro' :backgroundColor='setting.corgw'></progress>
							<progress v-else-if='person.bmi<person.bmimax' class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.corb' :backgroundColor='setting.corgw'></progress>
							<progress v-else class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.corr' :backgroundColor='setting.corgw'></progress>
						</view>
						<view class='tag-box'>
							<text :style='{color: tag.color}' class="tag-item" v-for="(tag, tagIndex) in person.tags" :key="tagIndex" vertical="true">{{tag.label}}</text>
						</view>
						<view slot="actions" class="card-actions">
							<view class="card-actions-item" @click="editPerson" data-id='{{person.id}}'>
								<uni-icons type="compose" size="18" :color="setting.corg"></uni-icons>
								<text class="card-actions-item-text cor-g">编辑</text>
							</view>
							<view class="card-actions-item" @click="delPerson" data-id='{{person.id}}'>
								<uni-icons type="trash" size="18" :color="setting.corg"></uni-icons>
								<text class="card-actions-item-text cor-g">删除</text>
							</view>
						</view>
					</uni-card>
				</block>
			</view>
		</uni-section>
		<uni-section title="不用餐人员" type="line">
			<view class='person-list'>
				<block v-for="(person, personIndex) in personList" :key="personIndex">
					<uni-card title="基础卡片" :isFull="true" sub-title="副标题" extra="额外信息" :thumbnail="person.head" class='person-item' v-if='person.useflag==0'>
						<template v-slot:title> 
							<uni-list>
								<uni-list-item :show-switch="true" :title="person.name" :switchChecked="person.useflag==1"/>
							</uni-list>
						</template>
						<view class='person-detail'>
							<text class='person-remark'>年龄:{{person.age}} BMI:{{person.bmi}}</text>
							<progress v-if='person.bmi<person.bmimin' class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.coro' :backgroundColor='setting.corgw'></progress>
							<progress v-else-if='person.bmi<person.bmimax' class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.corb' :backgroundColor='setting.corgw'></progress>
							<progress v-else class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.corr' :backgroundColor='setting.corgw'></progress>
						</view>
						<view class='tag-box'>
							<text :style='{color: tag.color}' class="tag-item" v-for="(tag, tagIndex) in person.tags" :key="tagIndex" vertical="true">{{tag.label}}</text>
						</view>
						<view slot="actions" class="card-actions">
							<view class="card-actions-item" @click="editPerson" data-id='{{person.id}}'>
								<uni-icons type="compose" size="18" :color="setting.corg"></uni-icons>
								<text class="card-actions-item-text cor-g">编辑</text>
							</view>
							<view class="card-actions-item" @click="delPerson" data-id='{{person.id}}'>
								<uni-icons type="trash" size="18" :color="setting.corg"></uni-icons>
								<text class="card-actions-item-text cor-g">删除</text>
							</view>
						</view>
					</uni-card>
				</block>
			</view>
		</uni-section>
		<view class='btn-bar'>
			<view class='btn-add'>
				<uni-icons type='plusempty' size="18" color="#fff"></uni-icons>
				<view class='btn-text'>添加成员</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import dateutil from '@/lib/dateutil.js';
	
	export default {
		data() {
			return {
				strdate: '',
				setting: [],
				personList: [
					{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
					{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
					{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
					{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 1, hostflag: 0},
					{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}]
			}
		},
		
		onReady(){
		},
		
		onLoad(options){
			if(options.strdate != null){
				this.strdate=dateutil.formatCNDate(dateutil.parseDate(options.strdate));
			}
		},
		
		mounted(){
			gui.init(this);
		},
		
		methods: {
			
		}
	}
</script>

<style>
	.person-list{
		display: flex; 
		flex-wrap: wrap;
		width: 100%;
		word-break: break-all;
		white-space: wrap;
	}
	
	.person-item{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 50%;
	}
	
	.person-detail{
		padding: 4px 0px;
	}
	
	.person-remark{
		font-size: 12px;
		color: #999;
	}
	
	.person-bmi{
		padding: 4px 0px 0px 0px;
	}
	
	.tag-box{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		word-break: break-all;
		white-space: wrap;
	}
	
	.tag-item{
		padding: 5px 5px 5px 0px;
		color: #33b4ff;
		font-size: 12px;
	}
	
	.card-actions{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}
	
	.card-actions-item{
		padding: 6px 0px 6px 6px;
	}
	
	.btn-bar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: fixed;
		bottom: 10px;
		left: 0px;
	}
	
	.btn-add{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: 40px;
		background-color: #33b4ff;
		color: #fff;
		font-size: 14px;
		border-radius: 20px;
	}
	
	.btn-text{
		height: 40px;
		line-height: 40px;
	}
</style>
